import React from 'react'
import './css/Contacts.css'

// import Swiper from '../../component/Swiper_Container/Swiper_Container'
import {Modal,Breadcrumb} from 'antd'

/* 通讯录
只请求一次接口
*/
class Contacts extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            currentState: 0, // 当前层级
            modal_visible: false,
            modal_item: {}, // 当前点击项数据，用来弹框显示
            bread_datas: [{name:'通讯录', state: 0}],// 面包屑数据
        }
    }

    // 接口返回的原始数据，注意不要污染
    dataSource = [];

    componentDidMount = () => {
        // console.log(this.refs.bread_container.scrollWidth)

        // start request
        T.ajax({
            key: 'contact',
            f: 'json',
            success: (result) => {
                this.dataSource = result.data;
                this.setState({
                    dataSource: this.trans('GROUP_40')
                });
            }
        });

    }

    // 获得当前节点数据
    trans = (selectedPid) => {
        let result = [...this.state.dataSource];
        let temp = [];
        for(let i = 0;i < this.dataSource.length;i++){
            let item = this.dataSource[i];
            if (item.pid == selectedPid) {
                temp.push(item);
            }
        }
        result.push(temp);

        return result;
    }

    /* 当下级节点长度不为0且类型为人的时候显示弹窗
    否则就显示下级节点 */
    handlerClick = (item, index) => {
        const datas = this.trans(item.id);
        const len = datas[datas.length - 1].length;

        if (len > 0 && datas.length > 1 && item.is_person === 'false') {
            // 加载下一级数据
            this.state.dataSource = datas;
            // 加载面包屑
            let state = this.state.currentState + 1;
            this.state.bread_datas.push({
                name: item.name,
                state
            });

            this.setState();

            /* 先渲染出下一级数据再切换，
            不然动画效果会异常 */
            setTimeout(() => {
                // 层级变化
                this.state.currentState++;
                this.setState();
            }, 0);
        } else if (datas[datas.length - 1].length == 0 && item.is_person === 'true') {
            // 显示详情弹框
            this.setState({
                modal_item: item,
                modal_visible: true
            });
        }
    }

    handlerBack = () => {
        // 判断是否是第一级
        if (this.state.currentState > 0) {
            // 层级变化
            this.state.currentState--;

            // 移除面包屑最后一项
            this.state.bread_datas.splice(-1, 1);

            /* 先移除后渲染会导致旧数据直接消失，
            所以这里先渲染页面再移除 */
            this.setState({}, () => {
                // 移除最后一项
                this.state.dataSource.splice(-1, 1);
            });
        }
    }

    modal_onCancel = () => {
        this.setState({
            modal_visible: false
        });
    }

    bread_click = (param) => {
        const {state} = param;
        let {bread_datas} = this.state;

        // 移除点击项state之后的数据，包含该项
        let index = 0;
        for(let i = 0;i < bread_datas.length;i++){
            let item = bread_datas[i];
            if(item.state == state){
                index = i;
                break;
            }
        }
        bread_datas = bread_datas.slice(0, ++index);
        
        this.setState({bread_datas,currentState: --index});
    }
    
    render() {
        const {handlerBack,handlerClick,history,modal_onCancel,bread_click} = this;
        const {dataSource,currentState,modal_visible,modal_item,bread_datas} = this.state;
        const width = document.documentElement.clientWidth || document.body.clientWidth;
        const height = document.documentElement.clientHeight || document.body.clientHeight;
        
        // 面包屑
        let bread = [];
        for(let i = 0;i < bread_datas.length;i++){
            let item = bread_datas[i];
            bread.push(<Breadcrumb.Item onClick={()=>bread_click(item)}>{item.name}</Breadcrumb.Item>);
        }
        // for(let item of bread_datas){
        //     bread.push(
        //         <Breadcrumb.Item onClick={()=>bread_click(item)}>{item.name}</Breadcrumb.Item>
        //     );
        // }

        // 列表
        let list = '';
        if(dataSource.length != 0){
            list = (
                <div className='list-container'>
                    {
                        dataSource.map((item,i)=>{
                            return (
                                <ul style={{left:(-100*(currentState-i))+'%',width:width}}>
                                    {
                                        item.map((jtem,j)=>{
                                            return (
                                                <li onClick={()=>handlerClick(jtem,j)}>
                                                    <div>
                                                        {/* <img src='./assets/Contacts/icon.jpg' /> */}
                                                        <label>{jtem.name}</label>
                                                        {/* <label className='right'>&gt;</label> */}
                                                        <div className='clear'></div>
                                                    </div>
                                                </li>
                                            )
                                        })
                                    }
                                </ul>
                            )
                        })
                    }
                </div>
            );
        }
        
        return (
            <div className='Contacts' style={{height,position:'relative'}}>
                <div onClick={handlerBack} className='back'>
                    {/* <label className='lt' style={{display:currentState===0?'none':''}}>&lt;</label>
                    <label className='title' style={{display:currentState===0?'':'none'}}>通讯录</label> */}
                    <Breadcrumb separator=">" className='bread'>
                        {bread}
                    </Breadcrumb>
                </div>
                {list}

                <Modal visible={modal_visible} title='联系人详情' footer={null} onCancel={modal_onCancel} wrapClassName='Contacts'>
                    <ul>
                        <li className='modal-li'>
                            <label>姓名</label>
                            <label className='right'>{modal_item.name}</label>
                        </li>
                        <li className='modal-li'>
                            <label>联系电话（手机）</label>
                            <a className='right'>{modal_item.mobile}</a>
                        </li>
                        <li className='modal-li'>
                            <label>职务</label>
                            <a className='right'>{modal_item.position}</a>
                        </li>
                        <li className='modal-li'>
                            <label>单位</label>
                            <a className='right'>{modal_item.dep_name}</a>
                        </li>
                    </ul>
                </Modal>
            </div>
        )
    }
}

export default Contacts